<template>
	<view>
		<view class="titleBox">
			<view class="titleLeft">
				<img src="../../static/title/back.png" class="titleBack" @click="goBack">
			</view>
			<view class="titleText">
				<text>办公转让</text>
			</view>
			<view class="titleRight">

			</view>
		</view>
		<view class="box1">
			<view class="box">
				<view class="box-item">
					<view class="left">
						商铺标题
						<input type="text" v-model="inputList.Title">
					</view>
					<view class="right">

					</view>
				</view>
				<view class="box-item">
					<view class="left">
						面积(/m²)
						<input type="text" v-model="inputList.Aera">
					</view>
					<view class="right">
					</view>
				</view>
				<view class="box-item">
					<view class="left">
						付款方式
						<view class="left-cont">
							<text>押</text>
							<input class="text" type="text" v-model="PayTypes.Pay">
							<text>付</text>
							<input class="text" type="text" v-model="PayTypes.Deposit">
						</view>
					</view>
					<view class="right">
				
					</view>
				</view>
				<view class="box-item">
					<view class="left">
						转让费(/元)
						<input type="text" v-model="inputList.TransferFee">
					</view>
					<view class="right">
				
					</view>
				</view>
				<view class="box-item">
					<view class="left" >
						区域
						<pickerAddress class="input" @change="change">{{txt}}</pickerAddress>
					</view>
					<view class="right">
						<uni-icons color= "#747475" class="icon" type="bottom" size="30"></uni-icons>
					</view>
				</view>
				<view class="box-item">
					<view class="left">
						门店详细位置
						<input type="text" v-model="inputList.Address">
					</view>
					<view class="right">

					</view>
				</view>
				<view class="box-item">
					<view class="left">
						楼层编号(/号)
						<input type="text" v-model="inputList.FloorNum">
					</view>
					<view class="right">

					</view>
				</view>
				<view class="box-item">
					<view class="left" @click="isdoor=true">
						<text>类型</text>
							<!-- <input type="text" v-model="doorname1"> -->
						<text class="input">{{doorname}}</text>
					</view>
					<view class="right">
						<uni-icons color= "#747475" class="icon" type="bottom" size="30"></uni-icons>
					</view>
				</view>
				<u-picker :show="isdoor" :columns="columns" keyName="name" @cancel="isdoor=false" @confirm="notarize"></u-picker>
				<view class="box-item">
					<view class="left">
						楼层
						<input type="text" v-model="inputList.Floor">
					</view>
					<view class="right">
				
					</view>
				</view>
				<view class="box-item">
					<view class="left">
						工位数
						<input type="text" v-model="inputList.WorkStations">
					</view>
					<view class="right">
				
					</view>
				</view>
				<view class="box-item">
					<view class="left" @click="isdoor1=true">
						<text>装修类型</text>
						<!-- <input type="text" v-model="doorname1"> -->
						<text class="input">{{doorname1}}</text>
					</view>
					<view class="right">
						<uni-icons color= "#747475" class="icon" type="bottom" size="30"></uni-icons>
					</view>
				</view>
				<u-picker :show="isdoor1" :columns="columns1" keyName="name" @cancel="isdoor1=false" @confirm="notarize1"></u-picker>
				<view class="box-item">
					<view class="left">
						租期(/月)
						<input type="text" v-model="inputList.ShortestTrade">
					</view>
					<view class="right">

					</view>
				</view>
				<view class="box-item">
					<view class="left">
						物业费(/元/月)
						<input type="text" v-model="inputList.PropertyCost">
					</view>
					<view class="right">

					</view>
				</view>
				<view class="box-item">
					<view class="left">
						房源描述
						<input type="text" v-model="inputList.Description">
					</view>
					<view class="right">

					</view>
				</view>
				<view class="box-item">
					<view class="left">
						房源介绍
						<input type="text" v-model="inputList.Introduce">
					</view>
					<view class="right">

					</view>
				</view>
				<view class="box-item">
					<view class="left" @click="getLocation">
						<text>商铺位置</text>
						<!-- <input type="text" v-model="address" placeholder="请选择位置"> -->
						<text class="input">{{address}}</text>
					</view>
					<view class="right">
					</view>
				</view>
				<view class="box-item2">
					<view class="">
						<view class="left">
							店铺照片
						</view>
						<view class="right">

						</view>
					</view>
				</view>
				<view class="u_upload">
					<!-- <u-upload @delete="deletePic" @afterRead="afterRead" :maxCount="1" width="77" height="77" >
					    <view class="uploadTitle img" style="color:#000" v-if="form.fileName">
							<image class="img" :src="form.fileName" mode="widthFix"></image>
						</view>
					</u-upload> -->
					<u-upload @delete="deletePic1" multiple :fileList="fileList1" @afterRead="afterRead1" :maxCount="9" width="77" height="77" >
					    <view class="uploadTitle img" style="color:#000">
					        <image class="img" src="" mode="widthFix"></image>
						</view>
					</u-upload>
				</view>
			</view>
		</view>

		<!-- 底部发布按钮 -->
		<view class="btn-box">
			<button @click="open">发布</button>
		</view>
		<!-- 发布成功弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<uni-card>
				<view class="card-1">
					发布成功提示
				</view>
				<view class="card-2">
					您已经发布成功
				</view>
				<view class="card-3">
					由于展示功能仅会员人员才能上架
				</view>
				<view class="card-4">
					您可以选择立即开通会员或到我的发布里面查看详情
				</view>
				<view class="card-5">
					<button class="card-5-btn" @click="onClick">立即开通</button>
				</view>
				<view class="card-6" @click="closed">
					我在想想
				</view>
			</uni-card>
		</uni-popup>
	</view>
</template>

<script>
	import pickerAddress from '../shop-rent-out/picker.vue'
	export default {
		components:{
		    pickerAddress
		},
		data() {
			return {
				txt: '选择地址',
				title: 'Hello',
				isdoor: false,
				doorname: '请选择类型',
				columns: [
					[{	
						name: '纯写字楼',
						id: 1
					},
					{
						name: '商业综合体',
						id: 2
					},
					{
						name: '商务公寓',
						id: 3
					},
					{
						name: '商务酒店',
						id: 4
					},]
				],
				isdoor1: false,
				doorname1: "请选择装修类型",
				columns1: [
					[{
						name: '毛坯',
						id: 1
					},
					{
						name: '简装',
						id: 2
					},
					{
						name: '精装',
						id: 3
					},
					{
						name: '豪华装',
						id: 4
					},]
				],
				address: '选择',
				form: {
					fileName: '上传图片',
					fileName1: '1',
					fileName2: '2',
					fileName3: '3',
				},
				inputList: {
					SupplyMode: 2,
					TransferFee: 2500,
					TransferMode: 1,
					OpenID: 'test15',
					Title: '办公室转让', //标题
					Aera: '250', //面积
					PayType: '押一付三',
					Address: '吴中区木渎镇月清街1-20号', //详细地址
					Floor: '10-12',
					FloorNum: '20', //商铺编号
					BulidType: '1',
					WorkStations: '64',
					Fixture: '2',
					PropertyCost: '600',
					Introduce: '（房源介绍）',
					TradePrice: '6000',
					ShortestTrade: '12', //租期
					Description: '科技园半楼，位置优越方便',
					SuitFor: '开公司',
					Surportings: '宽带,有限电视,水;电,电话,电梯,集中供暖,办公家具,免费车位,员工餐厅',
					FaceImageURL: '', //门脸图片
					RoomInsideImageURL: '', //室内图片1
					CityName: '',
					DistrictName: '',
					latitude: '',
					Longitude: '',
				},
				leaselise:[],
				Paths: [],
				PathD:[],
				fileList1: [],
				openid:'',
				latitude: '',
				longitude: '',
				PayTypes: {
					Pay:1,
					Deposit:3
				},
			}
		},
		onLoad() {
			
		},
		methods: {
			change(data) {
			    this.txt = data.data.join('')
			    // console.log(data.data.join(''))
				this.inputList.CityName = data.CityName
				console.log(this.inputList.CityName)
				this.inputList.DistrictName = data.DistrictName
				console.log(this.inputList.DistrictName)
			},
			notarize(e) {
				this.doorname = e.value[0].name;
				this.isdoor = false;
				this.inputList.BulidType = this.columns.id
			},
			notarize1(e) {
				this.doorname1 = e.value[0].name;
				this.isdoor1 = false;
				this.inputList.Fixture = this.columns1.id
			},
			//返回
			goBack() {
				uni.navigateBack(1)
			},
			// 打开弹窗
			open() {
				this.openid = uni.getStorageSync('OpenID');
				this.inputList.PayType = JSON.stringify(this.PayTypes);
				this.inputList.FaceImageURL = this.PathD[0].path
				this.inputList.RoomInsideImageURL = this.image
				console.log(this.inputList.FaceImageURL)
				console.log(this.inputList.RoomInsideImageURL)
				this.$myRequest({
					url: 'ShopLeaseAndTransfer',
					header: {'Content-Type' : 'form-data'},
					data: this.inputList,
						dataType: 'json',
				}).then(res => {
					this.leaselise = res.data;
					console.log(this.leaselise)
					this.$refs.popup.open('center')
				})
			},
			closed () {
				this.$refs.popup.close('center')
			},
			// 新增图片
			async afterRead1(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen1 = this[`fileList1${event.name}`].length
				lists.map((item) => {
					this[`fileList1${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise1(lists[i].url)
					let item = this[`fileList1${event.name}`][fileListLen1]
					this[`fileList1${event.name}`].splice(fileListLen1, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen1++
				}
			},
			uploadFilePromise1(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://ypsf.huashengzhuan.cn/Application/NewShopApi.ashx?action=uploadSingleImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {'Content-Type' : 'form-data'},
						success: (res) => {
							this.Paths = JSON.parse(res.data)
							this.PathD.push(this.Paths)
							console.log(this.PathD)
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
							for (let i = 0; i < this.PathD.length; i++) {
								this.image.push(this.PathD[i].path)
								this.image.join(',')
								this.image.splice(i, 1)
								// console.log(this.image)
							}
						}
					});
				})
			},
			// 删除图片
			deletePic1(event) {
				this[`fileList1${event.name}`].splice(event.index, 1)
				this.PathD.splice(event.index, 1)
				this.image.splice(event.index, 1)
			},
			onClick() {
				uni.navigateTo({
					url:'/pagesA/member-pay/member-pay'
				})
				this.$refs.popup.close()
			},
			getLocation() {
				var _this = this;
			    uni.chooseLocation({
					success: function (res) {
						console.log(res)
						_this.address = res.address,
						_this.latitude = res.latitude,
						_this.longitude = res.longitude
						_this.inputList.latitude = _this.latitude
						_this.inputList.Longitude = _this.longitude
					},
					complete(r){
						console.log(r)
						console.log(222)
					}
				})
			},
		}
	}
	
</script>

<style scoped>
	page {
		background-color: #FAFAFA;
	}

	.box1 {
		padding: 28rpx;
	}

	.box {
		padding: 28rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.box-item {
		display: flex;
		padding: 20rpx 0rpx;
		border-bottom: 1px solid #ccc;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #A8A8A8;
		
	}

	input {
		width: 500rpx;
		padding: 20rpx 0 0 0;
		justify-content: space-between;
		color: black;
	}
	.left{
		color: #000;
		display: flex;
		flex-direction: column;
	}
	.input {
		width: 500rpx;
		padding: 20rpx 0 0 0;
		justify-content: space-between;
		color: black;
	}
	.box-item .left {
		width: 500rpx;
		color: black;
	}
	.right{
		width: 100rpx;
		position: relative;
		top: 20rpx;
		right: 0;
		bottom: 0;
	}
	.right .icon{
		position: absolute;
		top: 20rpx;
		right: 0rpx;
	}

	.add {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		background-color: #ccc;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 10rpx;
	}

	.add-text {
		position: absolute;
		top: -24rpx;
		left: 16rpx;
	}

	.img-box {
		display: flex;
		justify-content: space-around;

	}

	img {
		/* width: 200rpx;
		height: 200rpx; */
		padding-top: 50rpx;
		margin-bottom: 200rpx;
	}

	.btn-box {}

	button {
		width: 380rpx;
		height: 70rpx;
		background: #FF5F17;
		border-radius: 34rpx;
		opacity: 1;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin: 38rpx auto;
	}

	.titleBack {
		position: absolute;
		top: 20rpx;
		font-size: 60rpx;
		color: #ccc;
	}

	.card-1 {
		text-align: center;
		font-size: 30rpx;
	}

	.card-2 {
		font-size: 30rpx;
		font-weight: 500;
		margin: 30rpx 0;
	}

	.card-3 {
		font-size: 30rpx;
		font-weight: 500;
		margin: 30rpx 0;
	}

	.card-4 {
		word-break: keep-all;
		white-space: nowrap;
	}

	.card-5 {
		text-align: center;
		margin: 20rpx 0 10rpx 0;
	}

	.card-5-btn {
		color: #000;
		width: 50%;
		border: 1px solid #000;
		background-color: #fff;
		line-height: 60rpx;
	}

	.card-6 {
		text-align: center;
		color: #ccc;
		margin-bottom: 50rpx;
	}

	.box-item2 {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #A8A8A8;
		border-bottom: none;
		margin-top: 20rpx;
	}

	.img {
		width: 154rpx;
		height: 154rpx;
		background: #EFEFEF;
		border-radius: 24rpx;
		opacity: 1;
		padding-top: 0;
	}
	.u_upload{
		width: 640rpx;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.left-cont{
		display: flex;
		padding: 20rpx 0 0 0;
		height: 40rpx;
		align-items: center;
	}
	.left-cont .text{
		margin-left: 10rpx;
		width: 30rpx;
		padding: 0;
	}
</style>
